<template>
    <div class="login-panel">
        <div class="login-panel-title">
            <p style="text-align: center; display:none;">
                <img :src="loginLogo" height="99" width="70" alt="">
            </p>
            <p style="height: 54px;line-height: 54px;font-size: 30px;text-align: center">欢迎登录</p>
            <p style="font-size: 36px;text-align: center">丰宁麻将后台</p>
        </div>
        <Form ref="form" :model="loginParam" :rules="ruleValidate">
            <Form-item prop="username">
                <Input type="text" 
                    v-model="loginParam.username"
                    placeholder="请输入用户名"
                    size="large"
                    @on-enter="handleSubmit">
                    <Icon type="md-person" size="22" slot="prepend" />
                </Input>
            </Form-item>
            <Form-item prop="password">
                <Input type="password" v-model="loginParam.password"
                placeholder="请输入密码"
                size="large"
                @on-enter="handleSubmit">
                    <Icon type="md-lock" size="22" slot="prepend" />
                </Input>
            </Form-item>
            <Form-item prop="vcode">
                <Row>
                    <Col span="14">
                        <Input type="text" v-model="loginParam.vcode" placeholder="请输入验证码"
                            size="large" @on-enter="handleSubmit">
                            <Icon type="md-pricetag" size="22" slot="prepend" />
                        </Input>
                    </Col>
                    <Col span="4" offset="1">
                        <img name="vcode" id="vcode" :src="loginParam.vcodesrc" width="100%" height="36" @click="getVCode" />
                    </Col>
                </Row>
            </Form-item>
            <Checkbox v-model="loginParam.rem" class="checkbox" size="large">记住密码</Checkbox>
            <Form-item>
                <Button type="primary" long @click="handleSubmit" size="large" :loading="isLoading">登 录</Button>
            </Form-item>
        </Form>
    </div>
</template>

<script>
import Security from '@/common/js/security.js';
import accountService from '@/network/service/AccountService.js';
import fileService from '@/network/service/FileService.js';

export default {
    data() {
		return {
			loginLogo: require('@/assets/logo.png'),
			ruleValidate: {
				username: [
				    { required: true, message: '用户名不能为空', trigger: 'blur' }
				],
				password: [
				    { required: true, message: '密码不能为空', trigger: 'blur' }
				],
				vcode: [
				    { required: true, message: '验证码不能为空', trigger: 'blur'}
				]
            },
            isLoading: false,
            loginParam: {
                username: null, //null,
                password: null, //null,
                rem: true, //false
                vcode: null,
                vcodesrc: '',
                imgToken: ''
            }
		}
    },
    mounted() {
        this.getVCode();
        var param = this.$store.getters.loginParam;
		if(param != null && param.username != null && param.password !=null) {
			this.loginParam.username = param.username;
			this.loginParam.password = Security.decrypt(param.password);
			this.loginParam.rem = param.rem;
		}
    },
    methods: {
		handleSubmit() {
			let $this = this;
			this.$refs['form'].validate((valid) => {
				if(valid) {
                    // login
                    $this.submitLogin();
				} else {
					this.$Message.error('表单验证失败!');
				}
			})
        },
        submitLogin() {
            let $this = this;
            let that = this;
			this.isLoading = true;
			accountService.login(
				this.loginParam.username,
				this.loginParam.password,
				this.loginParam.vcode,
				this.loginParam.imgToken
			).then(res => {
                $this.isLoading = false;
				let result = res.data;
				let code = result.rescode;
				let resmsg = result.msg;
				if (code == 100) {
					$this.$store.commit('setAccount', result.data);
					if($this.loginParam.rem == true) {
						$this.$store.commit('setLoginParam', {
							username: $this.loginParam.username,
							password: Security.encrypt($this.loginParam.password),
							rem: $this.loginParam.rem
						});
					} else {
						$this.$store.commit('clearLoginParam', $this.loginParam.username);
					}
					if (that.$route.query.redirect !== undefined) {
						that.$router.push({path: that.$route.query.redirect});
					} else {
						that.$router.push({name: 'home'});
					}
					that.$Message.success(resmsg);
				} else {
					that.$Message.error(resmsg);
                    $this.getVCode();
				}
			}, res => {
                console.log(res);
				that.isLoading = false;
				that.$Message.error('服务器异常，请稍后再试！');
			})
		},
		getVCode() {
			var $this = this;
			fileService.getVCode(73,36).then(res => {
				let result = res.data;
				let code = result.rescode;
				var resmsg = result.msg;
				if (code == 100) {
					if (result.data.url != null) {
						$this.loginParam.vcodesrc = result.data.url;
						$this.loginParam.imgToken = result.data.key;
						$this.loginParam.vcode = "";
					} else {
						$this.$Message.error('验证码获取失败，请点击验证码重新获取');
					}
				} else {
					$this.$Message.error(resmsg);
				}
			}, res => {
				$this.$Message.error('服务器异常，请稍后再试！');
			});
		}
	}
}
</script>

<style lang="less" scoped>
    .main-continer {
        width: 100%;
        height: 100%;
        .login-panel {
            width: 440px;
            margin-left: auto;
            margin-right: auto;
            .login-panel-title {
                font-size: 20px;
                color: #5659A6;
                margin-bottom: 20px;
            }
            .checkbox {
                margin-bottom: 20px;
            }
            .forget {
                float: right;
                font-size: 14px;
                color: rgba(0,0,0,0.87);
                cursor: pointer;
                &:hover {
                    color: #3399ff;
                }
            }
        }
    }
</style>


